<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>制作全网热播视频页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        #play {
            margin: 0 auto;
            width: 680px;
            overflow: hidden;
        }

        #play h1 {
            line-height: 40px;
            font-size: 22px;
        }

        #play ul>li {
            float: left;
            width: 220px;
            height: 308px;
            overflow: hidden;
            position: relative;
        }

        #play ol li {
            height: 37px;
            padding: 0px 0px 0 10px;
            position: relative;
        }

        #play ul>li>span {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 25px;
            color: #ffffff;
            font-weight: bold;
            padding: 5px 10px;
            z-index: 100;
        }

        #play ul>li>p {
            position: absolute;
            left: 50px;
            bottom: 10px;
            color: #ffffff;
        }

        #play ol {
            padding-top: 13px;
            padding-right: 5px;
        }

        #play ol li span {
            display: inline-block;
            color: #ffffff;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
        }

        #play ol li p {
            position: absolute;
            right: 0;
            top: 3px;
            color: #ffffff;
            background: #f0a30f;
            padding: 0 8px;
            font-size: 12px;
            display: none;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <section id="play">
        <h1>全网热播视频</h1>
        <ul>
            <li><img src="images/flv01.jpg">
                <p>昊花梦</p><span>1</span>
            </li>
            <li><img src="images/flv02.jpg">
                <p>好先生</p><span>2</span>
            </li>
            <li id="lj">
                <ol>
                    <li><span>3</span>三八线<p>加入看单</p>
                    </li>
                    <li><span>4</span>吉详天宝<p>加入看单</p>
                    </li>
                    <li><span>5</span>亲爱的翻译官<p>加入看单</p>
                    </li>
                    <li><span>6</span>仙剑云之凡<p>加入看单</p>
                    </li>
                    <li><span>7</span>权力的游戏第五季<p>加入看单</p>
                    </li>
                    <li><span>8</span>琅琊榜<p>加入看单</p>
                    </li>
                    <li><span>9</span>那年青春我们正好<p>加入看单</p>
                    </li>
                    <li><span>10</span>乡村受情8（上）<p>加入看单</p>
                    </li>
                </ol>
            </li>
        </ul>
    </section>
<script>
    $(function(){
        fno();
        seb();
        show();
    })
    function fno(){
        $("ul>li:not(#lj)").css("margin-right","10px");   
        $("#lj").css("background","#F0F0F0");
        $("li>span").css("background","orange");

    }
    function seb(){
        $("ol>li:lt(5)").css("background","url(images/orange.jpg)").css("background-repeat","no-repeat").css("background-position","180px -5px");
        $("ol>li:gt(4)").css("background","url(images/green.jpg)").css("background-repeat","no-repeat").css("background-position","180px -5px");
        $("ol>li:eq(1)").css("background","url(images/green.jpg)").css("background-repeat","no-repeat").css("background-position","180px -5px");
    }
    function show(){
        $("ol>li").on('mouseover',function(){
            $(this).find("p").css("display","block")
        });
        $("ol>li").on('mouseout',function(){
            $(this).find("p").css("display","none")
        })
    }
    
</script>
</body>

</html>